<template>
  <div class="equipment_boxs"></div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
export default {
  props: {
    mxmtnumber: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      baseURL: 'https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/shfx/',
      loading: true,
      maincontWidth: 0,
      maincontHeight: 0,
      maincontSc: 0,
      camera: null,
      scene: null,
      renderer: null,
      objectReItem: null,
      controls: null,
      newcontrols: null,
      clock: null,
      raycaster: null,
      mouse: null,
      //cameraOriginal: [1, 0.5, 6.876],
      cameraOriginal: [1, 0.5, -0.3],
      objects: []
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    // 返回
    back() {
      this.$emit('back')
    },
    init() {
      this.$nextTick(() => {
        this.maincontWidth = this.$el.offsetWidth
        this.maincontHeight = this.$el.offsetHeight
        this.maincontSc = this.maincontWidth / this.maincontHeight
        this.clock = new THREE.Clock()
        this.mouse = new THREE.Vector2()
        this.raycaster = new THREE.Raycaster()
        this.initScene()
      })
    },
    initScene() {
      let scene = new THREE.Scene()
      scene.background = null
      this.scene = scene
      this.initLight() //灯光
      this.initCamera() //相机
      this.initRenderer() //加载器
      this.initControl()
      this.animate() //刷新场景
      this.initFile() //添加临时盒子
      // this.zx()
      //控制器（不需要可屏蔽）
    },
    initLight() {
      const ambientLight = new THREE.AmbientLight(0xffffff, 1)
      this.scene.add(ambientLight)
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4)
      directionalLight.position.set(5, 5, 5)
      directionalLight.castShadow = true
      directionalLight.shadow.camera.top = 10
      directionalLight.shadow.camera.bottom = 10
      directionalLight.shadow.camera.left = 10
      directionalLight.shadow.camera.right = -10
      this.scene.add(directionalLight)
    },
    initCamera() {
      let camera = new THREE.PerspectiveCamera(35, this.maincontSc, 0.1, 1000)
      camera.position.set(0.9, 1.6, -0.21)
      camera.lookAt(0, 0, 0)
      this.camera = camera

      this.scene.add(this.camera)
    },
    initRenderer() {
      // let renderer = new THREE.WebGLRenderer({
      //   antialias: true,
      //   alpha: true
      // })

      // renderer.shadowMap.enabled = true
      // renderer.shadowMap.type = THREE.PCFShadowMap
      // renderer.outputEncoding = THREE.sRGBEncoding
      // this.renderer = renderer
      // this.$el.appendChild(this.renderer.domElement)
      // window.addEventListener('resize', this.onWindowResize)
      this.renderer = new THREE.WebGLRenderer({
        antialias: true,

        logarithmicDepthBuffer: true
      })
      // this.renderer.setClearColor(0xaaaaaa)
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.setSize(this.maincontWidth, this.maincontHeight)
      this.renderer.shadowMap.enabled = true
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
      this.renderer.toneMapping = THREE.ACESFilmicToneMapping
      this.renderer.toneMappingExposure = 1.5
      // this.renderer.outputEncoding = THREE.LinearSRGBColorSpace

      this.renderer.outputColorSpace = THREE.SRGBColorSpace

      this.$el.appendChild(this.renderer.domElement)
      window.addEventListener('resize', this.onWindowResize)
    },
    onWindowResize() {
      this.maincontWidth = this.$el.offsetWidth
      this.maincontHeight = this.$el.offsetHeight
      this.maincontSc = this.maincontWidth / this.maincontHeight
      this.camera.aspect = this.maincontSc
      this.camera.updateProjectionMatrix()
      this.renderer.setSize(this.maincontWidth, this.maincontHeight)
    },
    initFile() {
      let that = this
      let gltf_loader = new GLTFLoader()
      const dracoLoader = new DRACOLoader()
      // dracoLoader.setDecoderPath('/draco/')
      dracoLoader.setDecoderPath(
        'http://zfatt.oss-cn-beijing.aliyuncs.com/threejs/draco/'
      )

      dracoLoader.preload()
      gltf_loader.setDRACOLoader(dracoLoader)
      //加载模型
      gltf_loader.load(this.baseURL + this.mxmtnumber, function (glat) {
        that.loading = false
        let objectReItem = glat.scene

        objectReItem.traverse(function (child) {
          if (child.isMesh) {
            child.castShadow = true
            child.receiveShadow = true
            //
            if (that.mxmtnumber == 'RongXueJi.glb') {
              child.scale.multiplyScalar(1.5, 1.5, 1.5)
              objectReItem.rotation.y = 1.8
            }
            if (that.mxmtnumber == 'QingXiYaoPing.glb') {
              child.scale.multiplyScalar(1.5, 1.5, 1.5)
              objectReItem.rotation.y = 1.8
            }
            if (that.mxmtnumber == 'DaYinJi.glb') {
              child.scale.multiplyScalar(1, 1, 1)
              objectReItem.rotation.y = 1.8
            }
            // if (that.mxmtnumber == 'TuoGaiJi.glb') {
            //   child.scale.multiplyScalar(0.5, 0.5, 0.5)
            //   objectReItem.rotation.y = 3
            //   objectReItem.rotation.z = 0.1
            //   objectReItem.position.z = 0
            //   objectReItem.position.x = 0.2
            // }
            if (that.mxmtnumber == 'MMFXY_GLB.glb') {
              child.scale.multiplyScalar(0.25, 0.25, 0.25)
              objectReItem.rotation.y = 1.8
            }
            // if (that.mxmtnumber == 'DR.glb') {
            //   child.scale.multiplyScalar(0.3, 0.3, 0.3)
            // } else if (that.mxmtnumber == 'XianShuChuiZhiCeShiTong.glb') {
            //   child.scale.multiplyScalar(1.5, 1.5, 1.5)
            // } else if (that.mxmtnumber == 'FenBianLvCeShiKa.glb') {
            //   child.scale.multiplyScalar(3, 3, 3)
            // } else if (that.mxmtnumber == 'DiFenBianLvJianCeMoTi.glb') {
            //   child.scale.multiplyScalar(8, 8, 8)
            // } else if (that.mxmtnumber == 'TongPian.glb') {
            //   child.scale.multiplyScalar(2, 2, 2)
            // } else if (that.mxmtnumber == 'LiangDuXingKa.glb') {
            //   child.scale.multiplyScalar(4, 4, 4)
            // } else {
            //   child.scale.multiplyScalar(1, 1, 1)
            // }
          }
        })

        that.scene.add(objectReItem)
      })
    },
    onDocumentMouseMove(event) {
      event.preventDefault()

      let maincontWidth = this.$el.offsetWidth
      let maincontHeight = this.$el.offsetHeight
      this.mouse.x = (event.offsetX / maincontWidth) * 2 - 1
      this.mouse.y = -(event.offsetY / maincontHeight) * 2 + 1
      this.raycaster.setFromCamera(this.mouse, this.camera)
      const intersections = this.raycaster.intersectObjects(this.objects)
      if (intersections.length > 0) {
        document.body.style.cursor = 'pointer'
      } else {
        document.body.style.cursor = 'initial'
      }
    },
    onDocumentMouseDown(event) {
      event.preventDefault()

      let maincontWidth = this.$el.offsetWidth
      let maincontHeight = this.$el.offsetHeight
      this.mouse.x = (event.offsetX / maincontWidth) * 2 - 1
      this.mouse.y = -(event.offsetY / maincontHeight) * 2 + 1
      this.raycaster.setFromCamera(this.mouse, this.camera)
      //   const intersections = this.raycaster.intersectObjects(this.objects)
      //   if (intersections.length > 0) {
      //     this.$emit('clickItem', intersections[0].object.name)
      //   }
    },

    initControl() {
      this.$el.addEventListener('mousemove', this.onDocumentMouseMove, false)
      this.$el.addEventListener('click', this.onDocumentMouseDown, false)
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.maxDistance = 2
    },
    zx() {
      var offset = null

      offset = new THREE.Vector3(0, 0, 0)
      offset.applyEuler(this.camera.rotation)
      this.controls.target.copy(this.camera.position).sub(offset)
    },
    animate() {
      requestAnimationFrame(this.animate)

      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>
<style>
.equipment_boxs {
  z-index: 9;
  width: 100%;
  height: 100%;
}
</style>
